import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Navigator, Image, Button, Block} from '@tarojs/components'
import {GET_ORDER_LIST, RESOURCE_URL} from '../../constants/api'
import {GetRequest, vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import {newHttp} from "../../utils/request";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './index.scss'
import {AtInput, AtModal, AtModalAction, AtModalContent, AtModalHeader, AtSearchBar} from "taro-ui";

type PageState = {
  loadMoreStatus: "more" | "loading" | "noMore"
  isOpened: any
  orderList: any
  searchKey: any
}

export default class Index extends Component {
  state: PageState = {
    loadMoreStatus: 'loading',
    isOpened: true,
    orderList: [],
    searchKey: ''
  }
  page = 1

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const orderList = await this.getData(this.page)
      const old = this.state.orderList
      if (orderList) {
        this.setState({orderList: [...old, ...orderList]})
      }
    }
  }

  async UNSAFE_componentWillMount() {
    const searchKey = Taro.getCurrentInstance().router.params.params || ''
    if (searchKey) {
      this.setState({ searchKey })
    }
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
  }

  componentWillUnmount() {
    Taro.clearStorageSync()
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async getData(page) {
    Taro.showLoading({title: '加载中...'})
    const orderList = await newHttp.catchGet(GET_ORDER_LIST, {
      pageNumber: page,
      searchKeywords: this.state.searchKey,
      orderMeal: 1
    })
    if (orderList && orderList.length === 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    Taro.hideLoading()
    return orderList
  }

  searchChange(value) {
    this.setState({searchKey: value})
  }

  searchClear() {
    this.setState({searchKey: '', orderList: [], loadMoreStatus: 'loading'}, async () => {
      const orderList = await this.getData(this.page)
      this.setState({orderList})
    })
  }

  search() {
    this.page = 1
    this.setState({loadMoreStatus: 'loading', orderList: [], isOpened: false}, async () => {
      const orderList = await this.getData(this.page)
      if (orderList) {
        this.setState({orderList})
      }
    })
  }

  render() {
    const {orderList, searchKey, loadMoreStatus, isOpened} = this.state
    return (
      <View className='meals-list-root'>
        <GzhAuth/>
        {!isOpened && <Block>
          <View className='head-bg'>
            <AtSearchBar placeholder='手机号/身份证号' value={searchKey} onChange={this.searchChange.bind(this)}
                         onClear={this.searchClear.bind(this)}
                         onConfirm={this.search.bind(this)} onActionClick={this.search.bind(this)}/>
          </View>
          {orderList && orderList.map(item => <View key={item.id} className='order-item'>
            <Navigator  url={`/distributor/meals/detail?onlyTicketPay=1&orderId=` + item.id}>
              <View className='order-info'>
                <Image className='img' src={item.default_img_url} mode='aspectFill'/>
                <View className='name-box'>
                  <View className='name'>{item.product_name}</View>
                  {item.memo && <View className='valid-date'>{item.memo}</View>}
                  <View className='date'>{item.add_date}</View>
                  {!!item.site_name && <View className='date'>所属站点：{item.site_name}</View>}
                </View>
                <View className='order-info-right'>
                  <View className='order-info-num'>x{item.buy_amount}</View>
                  {item.pay_source_img && <Image className='order-info-from' src={item.pay_source_img}/>}
                </View>
              </View>
            </Navigator>
          </View>)}
          {orderList && orderList.length <= 0 && loadMoreStatus !== 'loading' && <View className='listNull'>
            <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix'/>
            <View className='text'>没有任何套餐包哦~~</View>
          </View>}
        </Block>}
        <AtModal isOpened={isOpened} className='model-wrapper' onClose={() => this.setState({isOpened: false})}>
          <AtModalContent>
            <AtInput
              border={false}
              name='value'
              type='text'
              placeholder='请输入手机号/身份证号'
              value={searchKey}
              onChange={this.searchChange.bind(this)}
            />
          </AtModalContent>
          <AtModalAction> <Button onClick={() => this.setState({isOpened: false})}>取消</Button> <Button
            onClick={this.search.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>
      </View>
    )
  }
}
